
<template>
    <a href="/foumadd">新增居民</a>
    <h1>居民列表</h1>
    <input type="text" v-model="dataps.fname" />
    <select v-model="dataps.tid">
        <option value="0">选择类型</option>
        <option v-for="d in Bang" :value="d.Tid">{{ d.Tname }}</option>
    </select>
    <input type="button" value="查询" class="btn btn-info" @click="querydata" />
    <td><input type="button" value="批量逻辑删除" class="btn btn-primary" @click="deleteall" /></td>
    <td><input type="button" value="批量逻辑修改状态" class="btn btn-danger" @click="updatestarts" /></td>
    <td><button @click="cz" class="btn btn-danger">重置</button></td>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="shus" @change="Quan"></th>
                    <th>主键</th>
                    <th>姓名</th>
                    <th>籍贯</th>
                    <th>民族</th>
                    <th>小区</th>
                    <th>头像</th>
                    <th>性别</th>
                    <th>身份账号</th>
                    <th>手机号</th>
                    <th>房间号</th>
                    <th>入住时间</th>
                    <th>状态</th>
                    <th>类型</th>
                    <th>类型名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td><input type="checkbox" v-model="sc" :value="d.Fid"></td>
                    <td>{{ d.Fid }}</td>
                    <td>{{ d.Fname }}</td>
                    <td>{{ d.JG }}</td>
                    <td>{{ d.MZ }}</td>
                    <td>{{ d.XQ }}</td>
                    <td><img style="height: 60px;width: 60px;" :src="axios.defaults.baseURL + d.Img"></td>
                     <td>{{ d.Set }}</td>
                     <td>{{ d.FFZH }}</td>
                     <td>{{ d.Phone }}</td>
                     <td>{{ d.FnameNum }}</td>
                     <td>{{moment(d.RZSJ).format("yyyy-MM-DD HH:mm:ss") }}</td>
                    <td>
                        <span>
                              <Span v-if="d.Stare==1">已审核</Span>
                              <Span v-if="d.Stare==2">未审核</Span>
                        </span>
                    </td>
                    <td>{{ d.Tid }}</td>
                    <td>{{ d.Tname }}</td>
                    <td>
                        <input v-if="d.Stare == 1" type="button" value="已审核" class="btn btn-success" @click="updatestart(d.Fid)" />
                        <input v-else="d.Stare==2" type="button" value="未审核" class="btn btn-warning" @click="updatestart(d.Fid)" />
                    </td>
                   
                    <td>
                        <input type="button" value="编辑" class="btn btn-info" @click="toEditor(d.Fid)" />
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ datacount.Count }}条，每页显示{{ dataps.size }}条，一共{{ datacount.pagecount }}页，当前第{{ dataps.index }}页

        <input type="button" @click="pageindex(1)" value="首页">
        <input type="button" @click="pageindex(2)" value="上一页">

        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">

        <input type="button" @click="pageindex(3)" value="下一页">
        <input type="button" @click="pageindex(4)" value="尾页">
        <input type="number" v-model="dataps.index" style="width: 50px;"> <input type="button" value="跳转"
            @click="skippage">

        <select v-model="dataps.size" @change="setsize">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router";
import moment from "moment";
const router = useRouter();
//页容量
const setsize = () => {
    getdata();
}
//编辑跳转
const toEditor = (id: number) => {
    router.push({ path: "/foumupdate", query: { id: id } });
};
//跳转
const skippage = () => {
    //判断当前页码是否有效
    if (dataps.value.index < 1 || dataps.value.index > datacount.value.pagecount) {
        alert('页码无效')

        dataps.value.index = 1; //实际看业务要求
    }
    getdata()
}
//翻页2
const page2index = (val: any) => {
    if (val < 1) {
        dataps.value.index = 1;
        getdata();
        return;
    }
    //找出是点的上一页按钮，还是点的下一页按钮
    if (val > datacount.value.pagecount) {
        dataps.value.index = datacount.value.pagecount;
        getdata();
        return;
    }

    dataps.value.index = val;
    getdata();
}
const cz=()=> {
      
       dataps.value.fname = ''
       dataps.value.tid = ''
    }
//翻页
const pageindex = (val: number) => {
    if (val == 1) {
        dataps.value.index = 1;
        getdata();
    }
    //上一页要注意页码大于1时才可以减1，要保证页码要大于等级1
    if (val == 2 && dataps.value.index > 1) {
        dataps.value.index--;
        getdata();
    }
    //下一页要注意页码必须小于最大分页数量
    if (val == 3 && dataps.value.index < datacount.value.pagecount) {
        dataps.value.index++;
        getdata();
    }

    if (val == 4) {
        dataps.value.index = datacount.value.pagecount;
        getdata();
    }
}
const shus=ref(false)
//全选全不全
const Quan=()=>{
    if(shus.value){

        sc.value=[]
        data.value.forEach(res=>{
            sc.value.push(res.Fid)
        })

    }
    else{
        sc.value=[]
    }
}


//批量逻辑修改
const updatestarts = () => {
    confirm("真的修改吗？")
    {
        axios.get("https://localhost:44380/api/Foum/UpdateRangeStart", { params: { idstring: sc.value.toString() } }).then(res => {
            if (res.data > 0) {
                alert("修改成功")
                getdata();
            }
            else {
                alert("失败")
            }
        })
    }


};
const sc = ref([])
const deleteall = () => {
    confirm("真的删除吗？")
    {
        axios.delete("https://localhost:44380/api/Foum/DeleteRangeStart", { params: { idstring: sc.value.toString() } }).then(res => {
            if (res.data > 0) {
                alert("删除成功")
                getdata();
            }
            else {
                alert("失败")
            }
        })
    }


};
//查询
const querydata = () => {
    getdata();
    bang();
};
onMounted(() => {
    bang();
})
const bang = () => {
    axios.get("/api/Foum/bang").then(res => {
        Bang.value = res.data
    })

}
const Bang = ref([{
    "Tid": 0,
    "Tname": ""
}])
onMounted(() => {
    getdata()
    getdata()
})
//上架或下架
const updatestart = (val: number) => {
    axios.get("/api/Foum/UpdateStart", { params: { id: val } }).then((res) => {
        if (res.data > 0) {
            alert("状态修改成功");
            getdata();
        } else {
            alert("状态修改失败。。");
        }
    });
};

//状态数组
const slist = [
    { id: 1, Stare: "已审核" },
    { id: 2, Stare: "未审核" },
];
//分页条件
const dataps:any = ref({
    index: 1, //默认页码为1
    size: 2, //默认页容量为2条
    fname:"",
    tid:0
})


const datacount = ref({
    Count: 0,    //保存总记录数
    pagecount: 0,
    //保存总页灵敏
})

const data = ref([{
      "Fid": 0,
      "Img": "string",
      "Fname": "",
      "Tid": 0,
      "FFZH": "",
      "Phone": "",
      "FnameNum": "",
      "JG": "",
      "DL": 0,
      "MZ": "",
      "Set": "",
      "IsDelete": false,
      "Stare": 0,
      "RZSJ": "2025-08-11T07:15:19.824",
      "XQ": "",
      "Tname": ""
}])  //保存会员集合
const getdata = () => {
    axios.get("/api/Foum/xisnshi", { params: dataps.value }).then(res => {
        data.value = res.data.Members //保存会员集合
        datacount.value.Count = res.data.Count //保存总记录数

        datacount.value.pagecount = Math.ceil(datacount.value.Count / dataps.value.size);   //保存总页灵敏
    });
}


</script>

<style scoped></style>